<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0px;
      margin: 0px;
    }

    html,
    body {
      overflow: hidden;
      height: 100%
    }
  </style>
</head>

<body>
  <div class="tip"></div>
  <canvas id="demoCanvas" width='320' height='480'></canvas>
  <script src="js/createjs.min.js"></script>
  <script>
    //状态定义
    var stateObj = {
      isMouseDown: false,
      direction: null
    }

    //点击位置
    var touchPos = {
      x: 0,
      y: 0
    }

    //摇杆位置
    var gamePad = {
      up: [100, 450],
      down: [100, 550],
      right: [150, 500],
      left: [50, 500],
    }

    //舞台创建
    stage = new createjs.Stage("demoCanvas");

    //启用touch事件
    createjs.Touch.enable(stage);

    //舞台宽高
    WIDTH = window.innerWidth;
    HEIGHT = window.innerHeight;
    stage.canvas.width = WIDTH;
    stage.canvas.height = HEIGHT;
    
    //创建元素
    circle = new createjs.Shape();
    left = new createjs.Bitmap("./images/left.png");
    right = new createjs.Bitmap("./images/right.png");
    up = new createjs.Bitmap("./images/up.png");
    down = new createjs.Bitmap("./images/down.png");
    circle.graphics.beginFill("#999").drawCircle(0, 0, 30);

    //位置赋值
    left.x = gamePad.left[0]
    left.y = gamePad.left[1]
    right.x = gamePad.right[0]
    right.y = gamePad.right[1]
    up.x = gamePad.up[0]
    up.y = gamePad.up[1]
    down.x = gamePad.down[0]
    down.y = gamePad.down[1]
    circle.x = 50;
    circle.y = 50;
    stage.addChild(circle, right, left, up, down);

    //计算控制器中心点
    gamePad.center = [up.x + up.image.width / 2, left.y + left.image.height / 2]
    var controlLength = [gamePad.center[0] - gamePad.left[0],gamePad.center[0] - gamePad.left[0] - left.image.width]

    //时钟监听
    createjs.Ticker.addEventListener("tick", handleTick);

    //点击监听
    stage.on("stagemousedown", handleDown);
    stage.on("stagemouseup", handleUp)
    
    setTimeout(function(){
      stage.update();
    },20)

    function handleTick(event) {
      if(stateObj.isMouseDown){
        handleMove()
      }
      stage.update(event);
    }

    function handleDown(event) {
      stateObj.isMouseDown = true;
      stateObj.direction = null
      touchPos.x = event.stageX;
      touchPos.y = event.stageY;
      touchLength = Math.sqrt((touchPos.x - gamePad.center[0]) * (touchPos.x - gamePad.center[0]) + (touchPos.y - gamePad.center[1]) * (touchPos.y - gamePad.center[1]))
      if(touchLength < controlLength[0] && touchLength > controlLength[1]){
        var angleResult = angle(touchPos,{x:gamePad.center[0],y:gamePad.center[1]})
        if(Math.abs(angleResult) <= 45){
          if(touchPos.x < gamePad.center[0]){
            stateObj.direction = 3
          }else{
            stateObj.direction = 1
          }
        }else{
          if(touchPos.y < gamePad.center[1]){
            stateObj.direction = 0
          }else{
            stateObj.direction = 2
          }
        }
      }
    }
    function angle(start,end){
      var diff_x = end.x - start.x,
          diff_y = end.y - start.y;
      return 360*Math.atan(diff_y/diff_x)/(2*Math.PI);
    }
    function handleUp() {
      stateObj.isMouseDown = false;
    }
    function handleMove(){
      if(stateObj.direction == 0){
        if(circle.y > 5){
          circle.y -= 3;
        }
      }else if(stateObj.direction == 1){
        if(circle.x < stage.canvas.width - 5){
          circle.x += 3;
        }
      }else if(stateObj.direction == 2){
        if(circle.y < 400){
          circle.y += 3;
        }
      }else if(stateObj.direction == 3){
        if(circle.x > 5){
          circle.x -= 3;
        }
      }
    }


  </script>
</body>

</html>